<template>
  <div class="mt-4">
    <NRow :gutter="24">
      <NCol :span="24">
        <n-form
          :label-width="80"
          :rules="rules"
          size="small"
          label-placement="left"
          label-align="left"
        >
          <n-card content-style="padding: 0;" style="margin-bottom: 12px" :hoverable="true">
            <n-grid
              :cols="3"
              :x-gap="28"
              style="margin-bottom: 12px; margin-top: 12px; margin-left: 12px"
            >
              <n-gi span="2">
                <n-form-item label="今日汇率">
                  <n-select :options="exchangeOptions" value="HPC:CAD" />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item>
                  <span style="font-weight: bold; color: #ff5722" :v-show="isShow">{{
                    excRate
                  }}</span>
                </n-form-item>
              </n-gi>
            </n-grid>
          </n-card>
        </n-form>
        <n-card content-style="padding: 0;" :bordered="false" :hoverable="true">
          <p style="font-size: 16px; margin-top: 15px; margin-left: 20px; margin-bottom: -10px"
            >汇率走势</p
          >
          <n-space justify="end" >
            <n-radio
              :checked="checkedValue === '7'"
              @change="handleChange"
              value="7"
              name="basic-demo"
            >
              近7天
            </n-radio>
            <n-radio
              :checked="checkedValue === '30'"
              @change="handleChange"
              value="30"
              name="basic-demo"
            >
              近30天
            </n-radio>
          </n-space>
          <div ref="chartRef" :style="{ height, width }"></div>
        </n-card>
      </NCol>
    </NRow>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import Exchangereport from './Exchangereport.vue';
import { getExchangeDate } from '@/api/report/exchangeReport';
import { createStorage } from '@/utils/Storage';
import { getExcRate } from '@/api/dashboard/console';

import { useECharts } from '@/hooks/web/useECharts';

import { basicProps } from './props';
const Storage = createStorage({ storage: localStorage });

export default defineComponent({
  // components: { Exchangereport },
  props: basicProps,
  setup() {
    const values = ref();
    const isShow = ref(false);
    const excRate = ref();
    getExcRate().then((val) => {
      console.log(val.data.body.exchangeRate);
      excRate.value = val.data.body.exchangeRate;
      console.log(excRate.value);
    });
    // 点击不同天数获取不同报表数据
    async function handleChange(e) {
      checkedValueRef.value = e.target.value;
      console.log(e.target.value);
      let amount = e.target.value;
      let custNo = Storage.get('custNo');
      const data = await getExchangeDate({ amount, custNo });
      values.value = data.data.body.histories;
      let days = values.value.map((item) => item.curDate);
       let rate = values.value.map((item) => item.exchangeRate);
      
      setOptions({
         tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#019680',
              },
            },
          },
        toolbox: {},
        legend: {
          data: ['汇率变化'],
        },
        grid: { left: '1%', right: '1%', top: '15  %', bottom: 0, containLabel: true },
        xAxis: [
          {
            type: 'category',
            data: days,
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '汇率变化',
            min: 0,
            max: 2000,
            interval: 400,
            axisLabel: {
              // formatter: '{value} ml'
            },
          },
          {
            show: false,
            type: 'value',
            name: '汇率变化',
            min: 0,
            max: 2000,
            interval: 400,
            axisLabel: {
              // formatter: '{value} °C'
            },
          },
        ],
        series: [
          {
            name: '汇率变化',
            type: 'line',
            yAxisIndex: 1,
            data: rate,
          },
        ],
      });
    }
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
    // 默认选择近7天获取数据
    const checkedValueRef = ref('7');
    onMounted(async () => {
      let metNo = Storage.get('custNo');
      let amount = '7';
      console.log({ amount });
      const data = await getExchangeDate({ amount, metNo });
      console.log(data);
       values.value = data.data.body.histories;
      let days = values.value.map((item) => item.curDate);
       let rate = values.value.map((item) => item.exchangeRate);
      setOptions({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#019680',
              },
            },
          },
        toolbox: {},
        legend: {
          data: ['汇率变化'],
        },
        grid: { left: '1%', right: '1%', top: '15  %', bottom: 0, containLabel: true },
        xAxis: [
          {
            type: 'category',
            data: days,
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '汇率变化',
            min: 0,
            max: 2000,
            interval: 400,
            axisLabel: {
              // formatter: '{value} ml'
            },
          },
          {
            show: false,
            type: 'value',
            name: '汇率变化',
            min: 0,
            max: 2000,
            interval: 400,
            axisLabel: {
              // formatter: '{value} °C'
            },
          },
        ],
        series: [
          {
            name: '汇率变化',
            type: 'line',
            yAxisIndex: 1,
            data: rate,
          },
        ],
      });
    });

    const exchangeOptions = [
      {
        label: 'HPC:CAD',
        value: 0,
      },
    ];
    return {
      chartRef,
      exchangeOptions,
      checkedValue: checkedValueRef,
      handleChange,
      excRate,
      getExcRate,
    };
  },
});
</script>
